<template>
  <!-- 样式 -->
  <div class="loginBg">
    <main>
      <div class="left">
        <img src="../assets/images/login-page.png" alt="" />
      </div>
      <div class="right">
        <div class="title">您好!欢迎来到 用安数智中台</div>
        <div class="login">
          <el-form
            :hide-required-asterisk="true"
            label-position="top"
            ref="loginFormNew"
            :model="loginForm"
            :rules="loginRulesNew"
            class="login-form"
          >
            <el-form-item prop="login_name" label="手机号/用户名">
              <el-input
                v-model="loginForm.login_name"
                type="text"
                auto-complete="off"
                placeholder="请输入账号"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                v-model="loginForm.password"
                @keyup.enter.native="handleLogin"
                show-password
                type="password"
                auto-complete="off"
                placeholder="请输入密码"
              >
              </el-input>
            </el-form-item>
            <el-checkbox
              v-model="loginForm.rememberMe"
              style="margin: 0px 0px 25px 0px"
              >记住密码</el-checkbox
            >
            <el-checkbox
              v-model="loginForm.automaticLogin"
              style="margin: 0px 0px 25px 20px"
              >自动登录</el-checkbox
            >
            <!-- <a class="forgetPwd">忘记密码？</a> -->
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                size="medium"
                type="primary"
                style="width: 100%"
                @click.native.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Cookies from "js-cookie";
import { OrganGetUserCompany } from "@/api/apis/organization.js";
import { setCompanyId } from "@/utils/auth.js";
import {
  OtherGetBillList,
  OtherSaveData,
  DelData,
} from "@/api/apis/tripartiteLink";

export default {
  data() {
    return {
      currentIndex: 0, // 当前显示的索引位
      activeIndex: 0,
      pageModel: {
        page: "1",
        limit: "20",
        SequenceName: "createDate",
        Sequence: "descending",
      },

      pageSize: 12, // 每页显示的数量
      pages: [], // 分页后的数据
      dataList: [
        // 所有数据
        {
          src: require("@/assets/login/login1.png"),
        },
        {
          src: require("@/assets/login/login2.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
        {
          src: require("@/assets/login/login1.png"),
        },
        {
          src: require("@/assets/login/login1.png"),
        },
        {
          src: require("@/assets/login/login2.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
        {
          src: require("@/assets/login/login1.png"),
        },
        {
          src: require("@/assets/login/login1.png"),
        },
        {
          src: require("@/assets/login/login2.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
        {
          src: require("@/assets/login/login3.png"),
        },
      ],
      loginForm: {
        login_name: "", //账号
        password: "", //密码
        rememberMe: false, //记住密码
        automaticLogin: false, //自动登录
        code: "",
        uuid: "",
      },
      loginRulesNew: {
        login_name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入账号",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
      },
      loading: false,
      selectCompany: false,
      companyList: [], //公司账套
      redirect: undefined,
      interval: null,
    };
  },
  computed: {
    indicatorText() {},
  },
  mounted() {
    this.getCookie();
    this.generatePages();
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    generatePages() {
      this.pages = [];
      let start = 0;
      while (start < this.dataList.length) {
        this.pages.push(this.dataList.slice(start, start + this.pageSize));
        start += this.pageSize;
      }
    },
    // 获取三方Link列表
    async getLinkList() {
      let params = {
        ...this.pageModel,
      };
      let res = await OtherGetBillList(params);

      if (res.code == 1) {
        this.linkList = res.data[1];
      }
    },
    // 获取cookie
    getCookie() {
      const login_name = Cookies.get("login_name");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      const automaticLogin = Cookies.get("automaticLogin");
      this.loginForm = {
        login_name:
          login_name === undefined ? this.loginForm.login_name : login_name,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        automaticLogin:
          automaticLogin === undefined ? false : Boolean(automaticLogin),
      };
      if (
        this.loginForm.automaticLogin === true &&
        this.loginForm.password &&
        this.loginForm.login_name
      ) {
        this.$nextTick(() => {
          this.handleLogin();
        });
      }
    },
    // 登录按钮被点击
    handleLogin() {
      this.$refs.loginFormNew.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("login_name", this.loginForm.login_name, {
              expires: 30,
            });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
            Cookies.set("automaticLogin", this.loginForm.automaticLogin, {
              expires: 30,
            });
          } else {
            Cookies.remove("login_name");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
            Cookies.remove("automaticLogin");
          }

          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router
                .push({
                  path: this.redirect || "/",
                })
                .catch(() => {});
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    // 获取公司列表数据
    async getCompanyList() {
      let params = {
        login_name: this.loginForm.login_name,
        password: this.loginForm.password,
      };
      let res = await OrganGetUserCompany(params);
      if (res.code == 1) {
        res.data[0].forEach((element) => {
          element.isLoading = false;
        });
        // 如果只存在一个公司 直接跳转到首页
        if (res.data[0].length == 1) {
          this.handleSelectCompany(res.data[0][0]);
        } else {
          this.companyList = res.data[0];
          this.selectCompany = true;
        }
      }
    },
    // 当前选择的组织
    handleSelectCompany(item) {
      item.isLoading = true;
      setCompanyId(item.companyID);
      this.$router
        .push({
          path: this.redirect || "/",
        })
        .catch(() => {});
    },
    // 返回上一级
    backLogin() {
      this.selectCompany = false;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.loginBg {
  background: url("../assets/images/login.png") no-repeat;
  width: 100vw;
  height: 100vh;
  main {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    width: 78vw;
    height: 70vh;
    min-height: 600px;
    border-radius: 3vw;
    margin: auto;
    > .left {
      width: 38vw;
      height: 56vh;
      min-height: 450px;
      margin: 7vh 6.8vw 0 4.2vw;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    > .right {
      margin-top: 158px;
      > .title {
        width: 228px;
        height: 9vh;
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1478f6;
        line-height: 50px;
      }
      > .login {
        margin-top: 6vh;
      }
    }
  }
}
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0 !important;
  font-size: 16px !important;
  color: #999999 !important;
}
::v-deep .el-input__inner {
  width: 17vw;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #dcdfe5;
}
::v-deep .el-input__inner:hover {
  box-shadow: 0 0 0 0px;
}
::v-deep .el-input__inner:focus {
  box-shadow: 0 0 0 0px;
}
::v-deep .el-button--medium {
  height: 46px;
}
</style>
